<!--扭矩管理板块-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">俄动力质量管理系统</el-link>
        <span class="center-text">频次检测管理-装配拧紧轴</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{useName}}</div>
          <div style="margin-top: 10px">ID:{{useId}}</div>
          <div style="margin-top: 10px" @click="logOut"><el-link>退出</el-link></div>
          <div class="headMain" slot="reference">{{useName}}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText"
              style="width: 160px">
          </el-input>
          <el-tree
              style="margin: 10px 8px;"
              :data="treeList"
              :props="defaultProps"
              default-expand-all
              @node-click="treeClick"
              :filter-node-method="filterNode"
              ref="tree"></el-tree>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main style="height: 79vh;overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="趋势查询" name="first">
                <div style="display: flex;margin-left: 10px;margin-right: 10px;height:34vh;overflow: auto">
                  <div style="flex: 1;  border: 1px solid blue; margin-right: 10px">
                    <div ref="myChart" style="width: 100%;height: 100%"></div>
                  </div>
                  <div style=" border: 1px solid blue; width: 200px; margin-right: 10px">
                    <div>
                      cpk
                    </div>
                  </div>
                  <div style="width: 150px; border: 1px solid blue;overflow: auto">
                    <div style="margin-top: 8px">
                      <el-button style="width: 130px" :style="{ backgroundColor:chartBackground25 , color:chartColor25}" @click="chart(25)">25组数据</el-button>
                    </div>
                    <div style="margin-top: 8px">
                      <el-button style="width: 130px" :style="{ backgroundColor:chartBackground50 , color:chartColor50}" @click="chart(50)">50组数据</el-button>
                    </div>
                    <div style="margin-top: 8px">
                      <el-button style="width: 130px" :style="{ backgroundColor:chartBackground125 , color:chartColor125}" @click="chart(125)">125组数据</el-button>
                    </div>
                    <div style="margin-top: 8px">
                      <el-button style="width: 130px" :style="{ backgroundColor:chartBackground300 , color:chartColor300}" @click="chart(300)">300组数据</el-button>
                    </div>
                    <div style="margin-top: 8px">
                      <el-button style="width: 130px" :style="{ backgroundColor:chartBackground500 , color:chartColor500}" @click="chart(500)">500组数据</el-button>
                    </div>
                  </div>
                </div>
                <div style="display: flex;margin-left: 10px;margin-right: 10px;margin-top:10px;height:33vh;overflow: auto">
                  <div style="flex: 1;  border: 1px solid blue; margin-right: 10px">
                    直方图
                    <div ref="myChartBor" style="height:100%;width:100%"></div>
                  </div>
                  <div style="flex: 1;  border: 1px solid blue; margin-right: 10px">
                    移动极差图
                    <div ref="myChartLine" style="height: 100%;width:100%"></div>
                  </div>
                  <div style="width: 360px; border: 1px solid blue;">
                    <el-table
                        :data="tableDataTorque"
                        border
                        style="width: 100%;margin-top: 10px" height="28vh"
                        @row-click="projectRowClick"
                        highlight-current-row="highlight-current-row">
                      <el-table-column
                          prop="project"
                          label="监控项目">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="数据查询" name="second">
                <div style="text-align: right">
                  <el-link @click="drawer=true;drawerTitle='设定查询条件'">点击查询</el-link>
                </div>
                <div>
                  <el-table
                      :data="tableData"
                      border
                      style="width: 100%;margin-top: 10px" height="100%"
                      highlight-current-row="highlight-current-row">
                    <el-table-column
                        prop="f_RECORD_ID"
                        label="发动机号">
                    </el-table-column>
                    <el-table-column
                        prop="f_MEASURE_ID"
                        label="力矩名称">
                    </el-table-column>
                    <el-table-column
                        prop="f_BEGIN_TIME"
                        label="拧紧时间"
                        width="200px">
                    </el-table-column>
                    <el-table-column
                        prop="f_VALUE"
                        label="实测值">
                    </el-table-column>
                    <el-table-column
                        prop="eXCEPT_VALUE"
                        label="标准值">
                    </el-table-column>
                    <el-table-column
                        prop="uP_VALUE"
                        label="上限值">
                    </el-table-column>
                    <el-table-column
                        prop="lOW_VALUE"
                        label="下限值">
                    </el-table-column>
                    <el-table-column
                        prop="f_MEASURE_UNIT"
                        label="单位">
                    </el-table-column>
                    <el-table-column
                        prop="mODEL_ID"
                        label="机型">
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
<!--              <el-tab-pane label="过站监视" name="third">-->
<!--                <div style="display: flex; margin: 5px;">-->
<!--                  <div style="float: left; width: 240px; border: 1px solid blue;margin-right: 10px;height: 68vh">-->
<!--                    <div style="width: 220px">-->
<!--                      <el-button style="margin-top: 10px;width: 200px" @click="siteInfoButton(1)">查看发动机连续性</el-button>-->
<!--                    </div>-->
<!--                    <div style="width: 220px">-->
<!--                      <el-button style="margin-top: 10px;width: 200px">查看发动机节拍</el-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="float: left; border: 1px solid blue; width: 100%;height: 68vh">-->
<!--                    <div style="margin-top: 8px">-->
<!--                      <el-checkbox-group v-model="typeList">-->
<!--                        <el-checkbox label="EB05"></el-checkbox>-->
<!--                        <el-checkbox label="EN19"></el-checkbox>-->
<!--                        <el-checkbox label="EB35"></el-checkbox>-->
<!--                        <el-checkbox label="EB75" ></el-checkbox>-->
<!--                        <el-checkbox label="EB38" ></el-checkbox>-->
<!--                      </el-checkbox-group>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <el-button style="margin-top: 8px" size="small" @click="siteInfoDate(1,7)">近1周</el-button>-->
<!--                      <el-button style="margin-top: 8px" size="small">近2周</el-button>-->
<!--                      <el-button style="margin-top: 8px" size="small">近1月</el-button>-->
<!--                      <el-button style="margin-top: 8px" size="small">近2月</el-button>-->
<!--                      <el-button style="margin-top: 8px" size="small">近3月</el-button>-->
<!--                    </div>-->
<!--                    <div style="margin-top: 8px">-->
<!--                      <div ref="myChartSiteInfoBor" style="height:55vh;width:100%"></div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </el-tab-pane>-->
              <el-tab-pane label="模型说明" name="fourth">模型说明</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small">中  文</el-button>
            <el-button plain size="small">Русский язык</el-button>
            <el-button plain size="small">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--用户选择对-->
    <el-dialog
        :title="messageDialog"
        :visible.sync="selectDateDialog"
        width="30%"
        :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="selectDateDialog = false">取 消</el-button>
    <el-button type="primary" @click="selectDateDialog = false">确 定</el-button>
  </span>
    </el-dialog>

    <!--抽屉放置区域-->
    <el-drawer
        :title="drawerTitle"
        :visible.sync="drawer"
        direction="rtl"
        size="30%">
      <div style="padding: 10px">
        <div style="padding: 8px;border: 1px solid blue;">
          <div>发动机号查询</div>
          <div style="margin-top: 8px;">（不同发动机号用“；”分割）</div>
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
              style="margin-top: 8px">
          </el-input>
          <el-button style="margin-top: 8px;width: 100%">点击查询</el-button>
        </div>
        <div style="padding: 5px;margin-top:10px;border: 1px solid blue;">
          <div>按照时间区间查询</div>
          <el-date-picker
              v-model="inquiryvalueDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-top: 8px">
          </el-date-picker>
          <div style="margin-top: 8px">
            <div style="margin-top: 20px">
              <el-radio-group v-model="inquiryRadio" size="small">
                <el-radio-button label="EB05"></el-radio-button>
                <el-radio-button label="EB35"></el-radio-button>
                <el-radio-button label="EB75"></el-radio-button>
                <el-radio-button label="EN19"></el-radio-button>
                <el-radio-button label="EN39"></el-radio-button>
                <el-radio-button label="ALL"></el-radio-button>
              </el-radio-group>
          </div>
          <el-button style="margin-top: 5px;width: 100%">点击查询</el-button>
        </div>
        </div>
        <div style="padding: 5px;margin-top:10px;border: 1px solid blue;">
          <div>按照特性查询</div>
          <el-date-picker
              v-model="inquiryvalueDate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-top: 8px">
          </el-date-picker>
          <div style="margin-top: 8px">
            <div style="margin-top: 20px">
              <el-radio-group v-model="inquiryRadio" size="small">
                <el-radio-button label="EB05"></el-radio-button>
                <el-radio-button label="EB35"></el-radio-button>
                <el-radio-button label="EB75"></el-radio-button>
                <el-radio-button label="EN19"></el-radio-button>
                <el-radio-button label="EN39"></el-radio-button>
                <el-radio-button label="ALL"></el-radio-button>
              </el-radio-group>
            </div>
            <el-button style="margin-top: 5px;width: 100%">点击查询</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {torqueManage, tree_workshop_product_op_chinese} from "@/configUse";
import * as echarts from "echarts";

export default {
  name: "torqueManage",
  components: {},
  data() {
    return {
      activeName:'first',
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //树形导航的变量
      treeList:tree_workshop_product_op_chinese,
      //导航筛选的变量
      filterText:'',
      //树形的导航用到的数据模板
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //用户点击到了OP，然后传递出来的节点
      opSign:'',
      //扭矩管理项目列表显示的变量
      tableDataTorque:[
        {
          project:''
        }
      ],
      //用户选择查看多少个数据的变量
      selectNum:25,
      //用户单击的是那个项目
      projectClick:'',
      //按钮颜色变更
      chartBackground25:'#0269fa',
      chartColor25:'white',
      chartBackground50:'',
      chartColor50:'',
      chartBackground125:'',
      chartColor125:'',
      chartBackground300:'',
      chartColor300:'',
      chartBackground500:'',
      chartColor500:'',
      //扭矩总数据表
      tableData:[{
        //主键
        id:0,
        //发动机号
        f_RECORD_ID:'',
        //扭矩名称
        f_MEASURE_ID:'',
        //生成时间
        f_BEGIN_TIME:'',
        //机型号
        mODEL_ID:'',
        //工序名称
        f_STATION_ID:'',
        //中值
        eXCEPT_VALUE:'',
        //实测值
        f_VALUE:'',
        //上限值
        uP_VALUE:'',
        //下限值
        lOW_VALUE:'',
        //单位
        f_MEASURE_UNIT:''
      }],

      tempDataX:[],
      tempDataS:[],
      tempDataSt:[],
      tempDataCe:[],
      tempDataLo:[],

      //Echarts实例设计到的数据
      //画趋势图
      chartUser: null, // 保存ECharts实例
      option: {
        title:{
          //设置标题的样式
          textStyle:{
            color:'red',
          },
          //设置标题的居中方式（水平）
          x:'center',
          text:'暂未选择',
        },
        xAxis:{
          data:[]
        },
        yAxis:{
          type: 'value',
          min:0, // 设置y轴的最小值
          max:100,//设置y轴的最大值
        },
        series:[{
          //设置系列，设置当前映射出的图形
          name:'valueUse',
          type:'line',
          stack:'num',
          data:[]
        },
          {
            //设置系列，设置当前映射出的图形
            name:'standard',
            type:'line',
            stack:'standard',
            data:[]
          },
          {
            //设置系列，设置当前映射出的图形
            name:'ceiling',
            type:'line',
            stack:'ceiling',
            data:[]
          },
          {
            //设置系列，设置当前映射出的图形
            name:'lower',
            type:'line',
            stack:'lower',
            data:[]
          },],
        grid: {
          top:'8%',
          left: '2%', // 图表内容距离容器左侧的距离
          right: '2%', // 图表内容距离容器右侧的距离
          bottom: '10%', // 图表内容距离容器底部的距离，可以适当增加这个值来留出更多空间给标题
          containLabel: true, // 网格是否包含坐标轴的标签在内
        },
        tooltip:{
          //触发类型
          trigger:'axis',
          //设置坐标轴的指示器
          axisPointer:{
            type: 'cross'
          },
        },
      },
      //画直方图
      chartUserBor:null,
      optionBor: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'3%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1/10', '2/10', '3/10', '4/10', '5/10', '6/10','7/10','8/10','9/10','10/10'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:[]
          }
        ]
      },
      //画移动极差图
      chartUserLien:null,
      optionLien: {
        title:{
          //设置标题的样式
          textStyle:{
            color:'red',
          },
          //设置标题的居中方式（水平）
          x:'center',
        },
        xAxis:{
          data:[]
        },
        yAxis:{
          type: 'value',
          min:0, // 设置y轴的最小值
          max:100,//设置y轴的最大值
        },
        series:[{
          //设置系列，设置当前映射出的图形
          name:'valueUse',
          type:'line',
          stack:'num',
          data:[]
        },
          {
            //设置系列，设置当前映射出的图形
            name:'standard',
            type:'line',
            stack:'standard',
            data:[]
          },
          {
            //设置系列，设置当前映射出的图形
            name:'ceiling',
            type:'line',
            stack:'ceiling',
            data:[]
          },
          {
            //设置系列，设置当前映射出的图形
            name:'lower',
            type:'line',
            stack:'lower',
            data:[]
          },],
        grid: {
          top:'8%',
          left: '2%', // 图表内容距离容器左侧的距离
          right: '2%', // 图表内容距离容器右侧的距离
          bottom: '10%', // 图表内容距离容器底部的距离，可以适当增加这个值来留出更多空间给标题
          containLabel: true, // 网格是否包含坐标轴的标签在内
        },
        tooltip:{
          //触发类型
          trigger:'axis',
          //设置坐标轴的指示器
          axisPointer:{
            type: 'cross'
          },
        },
      },
      //过程能力相关的项目
      cpk:0,
      //画过站时间分析的柱状图
      myChartSiteInfoBor:null,
      optionSiteInfoBor: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'3%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1/10', '2/10', '3/10', '4/10', '5/10', '6/10','7/10','8/10','9/10','10/10'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:[]
          }
        ]
      },


      //抽屉的变量：
      // 控制抽屉是否打开
      drawer:false,
      //抽屉的标题
      drawerTitle:'',
      // 记录多个查询发动机号的数据
      textarea:'',
      //记录用户选择的开始时间，结束时间
      inquiryvalueDate:'',
      //记录是那个机型
      inquiryRadio:'',

      //弹窗的变量
      //弹窗的消息返修
      messageDialog:'',
      //控制选择时间段的弹窗
      selectDateDialog:false,

      //复选框，选择机型，默认EB05
      typeList:['EB05',],

      //记录过站时间的数据大表
      siteInfoData:[],
    }
  },
  watch: {},
  methods: {
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //退出登录
    logOut(){
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'changeModel',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.changeModel
          this.useId=useId
        }
      })
    },
    //在tab控件上单击的函数
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //点击导航进行的筛选
    treeClick(data,node){
      console.log(data)
      //这里的所有接口都走到《控制计划页的接口》.并且重新整理数据表。使用新的数据表。
      //根据点击的内容，查询控制计划中的信息
      if (data.label.includes('OP') || data.label.includes('GG') || data.label.includes('HL')){
        //表明现在的点击是已经到了工序部位了。
        //把选择的节点传递出去
        this.opSign=node
        //查出这一序的监控项目
        const nameTemp=node.parent.label+'-'+data.label
        this.tableDataTorque=[]
        for (let i = 0; i < torqueManage.length; i++) {
          if (torqueManage[i].name===nameTemp){
            //给列表进行赋值
            for (let j = 0; j < torqueManage[i].project.length; j++) {
              this.tableDataTorque.push({project: torqueManage[i].project[j]})
            }
            break
          }

        }
      }
    },
    //导航筛选的函数
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //在项目上单击调用数据，进行画图用。
    projectRowClick(row){
      //把点击的数据传递出去
      this.projectClick=row.project
      this.inquiryData()
    },
    //根据用户点击的项目和产品，筛选数据。根据选择数量筛选,并且筛选出的数据作图
    inquiryData(){
      // 计算是那个机型
      let tempType=''
      if (this.opSign.parent.label.includes('EB05')){
        tempType='EB05'
      }
      else if (this.opSign.parent.label.includes('EN19')){
        tempType='EN19'
      }
      //数据库保存的工序之间是用“.”分割，因此需要把中间的“-”换为“.”
      let op=''
      if (this.opSign.data.label.includes('-')){
        op=this.opSign.data.label.replace(/-/g, ".")
      }
      else {
        op=this.opSign.data.label
      }
      //向后端发送请求，筛选数据
      this.$request.post("/inquiryDataTorque",
          {
            selectNum:this.selectNum,//传入查询的数量
            project:this.projectClick,//传入查询的项目，是那个螺栓的扭矩或那个项目
            op:op,//传入项目工序号
            engineType:tempType//传入项目机型号
      }).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              this.tableData=result.data
              //清理原有的图像
              if (this.chartUser) {
                this.chartUser.dispose()
              }
              if (this.chartUserBor){
                this.chartUserBor.dispose()
              }
              if (this.chartUserLien){
                this.chartUserLien.dispose()
              }
              //进行画图
              /*画趋势图*/
              //清空数据:趋势图
              this.option.series[0].data=[]
              this.option.series[1].data=[]
              this.option.series[2].data=[]
              this.option.series[3].data=[]
              this.chartUser= echarts.init(this.$refs.myChart)
              this.chartUser.setOption(this.option);
              //画直方图：清空数据
              this.optionBor.series[0].data=[]
              this.chartUserBor=echarts.init(this.$refs.myChartBor)
              this.chartUserBor.setOption(this.optionBor)
              //画移动极差图：清空数据
              this.optionLien.series[0].data=[]
              this.optionLien.series[1].data=[]
              this.optionLien.series[2].data=[]
              this.optionLien.series[3].data=[]
              this.chartUserLien=echarts.init(this.$refs.myChartLine)
              this.chartUserLien.setOption(this.optionLien)
              //如果数据有2个点以上的时候，再画图，如果没有，就不画了
              if (result.data.length>=1){
                //画趋势图
                this.EchartLien(result.data)
                //画直方图
                this.EchartBor(result.data)
                //画移动极差图
                this.EchartLienMove(result.data)
              }
            }
      })
    },
    //画趋势图,直接传入数据，而不是筛选出来的统一结果
    EchartLien(result){
      this.tempDataX=[]
      this.tempDataS=[]
      this.tempDataSt=[]
      this.tempDataLo=[]
      this.tempDataCe=[]
      //清空数据
      this.option.series[0].data=[]
      this.option.series[1].data=[]
      this.option.series[2].data=[]
      this.option.series[3].data=[]

      //组合图线的数据
      for (let i = 0; i < result.length; i++) {
        //数据的日期，横坐标的值
        this.tempDataX.push(result[i].f_BEGIN_TIME)
        //趋势图的数据。
        this.tempDataS.push(result[i].f_VALUE)
        //趋势图的中值
        this.tempDataSt.push(result[i].eXCEPT_VALUE)
        //趋势图的上限值
        this.tempDataCe.push(result[i].uP_VALUE)
        //趋势图的下限值
        this.tempDataLo.push(result[i].lOW_VALUE)
      }
      this.option.xAxis.data=this.tempDataX
      this.option.series[0].data=this.tempDataS
      this.option.series[1].data=this.tempDataSt
      this.option.series[2].data=this.tempDataCe
      this.option.series[3].data=this.tempDataLo
      //设定y轴的最小值
      this.option.yAxis.min=(result[0].lOW_VALUE*0.7).toFixed(3)
      this.option.yAxis.max=(result[0].uP_VALUE*1.3).toFixed(3)
      //设置图标的名称
      this.option.title.text=this.projectClick
      //组合到配置项中,并且创建图像
      this.chartUser.setOption(this.option);
    },
    //画直方图,直接传入数据，而不是筛选出来的统一结果
    EchartBor(result){
      this.tempDataX=['1/10','2/10','3/10','4/10','5/10','6/10','7/10','8/10','9/10','10/10']
      this.optionBor.series[0].data=[]
      this.optionBor.xAxis.data=this.tempDataX
      // 设定变量值
      let valueTemp=[0,0,0,0,0,0,0,0,0,0]
      //下线最小值
      let Cls=parseInt(result[0].lOW_VALUE)
      // 公差带的值
      let cL=parseInt(result[0].uP_VALUE)-parseInt(result[0].lOW_VALUE)
      for (let i = 0; i < result.length; i++) {
        if ( result[i].f_VALUE>=Cls && result[i].f_VALUE<Cls+cL/10){
          valueTemp[0]=valueTemp[0]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10 && result[i].f_VALUE<Cls+cL/10*2){
          valueTemp[1]=valueTemp[1]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*2 && result[i].f_VALUE<Cls+cL/10*3){
          valueTemp[2]=valueTemp[2]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*3 && result[i].f_VALUE<Cls+cL/10*4){
          valueTemp[3]=valueTemp[3]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*4 && result[i].f_VALUE<Cls+cL/10*5){
          valueTemp[4]=valueTemp[4]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*5 && result[i].f_VALUE<Cls+cL/10*6){
          valueTemp[5]=valueTemp[5]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*6 && result[i].f_VALUE<Cls+cL/10*7){
          valueTemp[6]=valueTemp[6]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*7 && result[i].f_VALUE<Cls+cL/10*8){
          valueTemp[7]=valueTemp[7]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*8 && result[i].f_VALUE<Cls+cL/10*9){
          valueTemp[8]=valueTemp[8]+1
        }
        else if (result[i].f_VALUE>=Cls+cL/10*9 && result[i].f_VALUE<Cls+cL/10*10){
          valueTemp[9]=valueTemp[9]+1
        }
      }
      //设定y轴的最小值
      this.optionBor.series[0].data=valueTemp
      //组合到配置项中
      this.chartUserBor.setOption(this.optionBor);
    },
    //画移动极差图,直接传入数据，而不是筛选出来的统一结果
    EchartLienMove(result){
      this.tempDataX=[]
      this.tempDataS=[]
      this.tempDataSt=[]
      this.tempDataLo=[]
      this.tempDataCe=[]

      this.optionLien.series[0].data=[]
      this.optionLien.series[1].data=[]
      this.optionLien.series[2].data=[]
      this.optionLien.series[3].data=[]
      //建立一个空的数据，是数组，记录移动极差。
      let tempZ
      for (let i = 0; i < result.length-1; i++) {
        this.tempDataX.push(result[i].f_BEGIN_TIME)
        tempZ=result[i].f_VALUE-result[i+1].f_VALUE
        this.tempDataS.push(tempZ)
        this.tempDataCe.push(result[i].uP_VALUE)
        this.tempDataLo.push(result[i].lOW_VALUE)
      }
      this.optionLien.xAxis.data=this.tempDataX
      this.optionLien.series[0].data=this.tempDataS
      this.optionLien.series[1].data=this.tempDataSt
      this.optionLien.series[2].data=this.tempDataCe
      this.optionLien.series[3].data=this.tempDataLo
      //设定y轴的最小、最大值
      this.optionLien.yAxis.min=(Math.min(...this.tempDataS)*1.1).toFixed(3)
      this.optionLien.yAxis.max= (Math.max(...this.tempDataS)*1.1).toFixed(3);

      //组合到配置项中
      this.chartUserLien.setOption(this.optionLien);
    },
    //点击数量按钮，进行颜色变化
    chart(nub){
      this.selectNum=nub
      if (nub===25){

        this.chartBackground25='#0269fa'
        this.chartColor25='white'

        this.chartBackground50=''
        this.chartColor50=''

        this.chartBackground125=''
        this.chartColor125=''

        this.chartBackground300=''
        this.chartColor300=''

        this.chartBackground500=''
        this.chartColor500=''
      }
      else if (nub===50){

        this.chartBackground25=''
        this.chartColor25=''

        this.chartBackground50='#0269fa'
        this.chartColor50='white'

        this.chartBackground125=''
        this.chartColor125=''

        this.chartBackground300=''
        this.chartColor300=''

        this.chartBackground500=''
        this.chartColor500=''
      }
      else if (nub===125){

        this.chartBackground25=''
        this.chartColor25=''

        this.chartBackground50=''
        this.chartColor50=''

        this.chartBackground125='#0269fa'
        this.chartColor125='white'

        this.chartBackground300=''
        this.chartColor300=''

        this.chartBackground500=''
        this.chartColor500=''
      }
      else if (nub===300){
        this.chartBackground25=''
        this.chartColor25=''

        this.chartBackground50=''
        this.chartColor50=''

        this.chartBackground125=''
        this.chartColor125=''

        this.chartBackground300='#0269fa'
        this.chartColor300='white'

        this.chartBackground500=''
        this.chartColor500=''
      }
      else if (nub===500){
        this.chartBackground25=''
        this.chartColor25=''

        this.chartBackground50=''
        this.chartColor50=''

        this.chartBackground125=''
        this.chartColor125=''

        this.chartBackground300=''
        this.chartColor300=''

        this.chartBackground500='#0269fa'
        this.chartColor500='white'
      }
    },
    //点击查看过站数据的类型，然后展现数据
    siteInfoButton(doe){
      //查看的是发动机的连续性
      if (doe===1){
        //
      }
    },
    //点击查看过站信息的数据
    async siteInfoDate(doe, date) {
      //获得今日日期
      let toDay = this.nowDate()
      let oldDay = this.oldDate(date)
      //向数据库中查询这个范围内的数据
      // 获得机型号
      let type= this.typeList.join('/');
      //获得工序号
      if (this.opSign && this.opSign.data && this.opSign.data.label && this.opSign.data.label.includes('OP')) {
        let op=this.opSign.data.label.replace(/-/g, '.');
        this.siteInfoData = await this.siteInfoStartDateByEndDate(toDay,oldDay,type,op)
      }
      else {
        this.$message('请选择工序')
      }
      //计算柱状图的形状
      //组合X轴\Y轴
      let xAis=[]
      let yAis=[]
      for (let i = 0; i < this.siteInfoData.length; i++) {
        let xTemp=this.siteInfoData[i].f_RECORD_ID
        if (this.siteInfoData[i].f_BEGIN_TIME!==undefined ||this.siteInfoData[i].f_BEGIN_TIME!=='' || this.siteInfoData[i].f_BEGIN_TIME!=='undefined'){
          let f_END_TIME=new Date(this.siteInfoData[i].f_END_TIME)
          let f_BEGIN_TIME=new Date(this.siteInfoData[i].f_BEGIN_TIME)
          let time=(f_END_TIME-f_BEGIN_TIME)/1000 //是秒
          xAis.push(xTemp)
          yAis.push(time)
        }
        //给柱状图中的数据进行赋值
        //剔除数据中的异常项目，因为这两个数据是对应的，因此就对数据进行剔除
        this.optionSiteInfoBor.xAxis[0].data=xAis
        this.optionSiteInfoBor.series[0].data=yAis
      }
      console.log(xAis,yAis)
      //创建图形
      this.myChartSiteInfoBor=echarts.init(this.$refs.myChartSiteInfoBor)
      //组合到配置项中
      this.myChartSiteInfoBor.setOption(this.optionSiteInfoBor);
    },
    //辅助函数：获取当前时间，并格式化为YYYY-MM-DD时间格式
    nowDate(){
      const date = new Date();
      // 获取年份（yyyy）
      const year = date.getFullYear();

      // 获取日期（dd），并填充前导零
      const day = String(date.getDate()).padStart(2, '0');

      // 获取月份（MM），并填充前导零
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1

      // 格式化日期为 yyyy-dd-MM
      return `${year}-${month}-${day}`;
    },
    //辅助函数，获得当前时间减去用户输入的天数，并格式化为YYYY-MM-DD
    oldDate(num){
      // 给定的文本格式日期
      const dateStr = this.nowDate();
// 将文本格式的日期转换为 Date 对象
      const date = new Date(dateStr);
// 检查日期是否有效
      if (isNaN(date)) {
        console.error("无效的日期格式");
      } else {
        // 减去用户输入的天数
        date.setDate(date.getDate() - num);

        // 将 Date 对象转换回文本格式 (YYYY-MM-DD)
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并填充0
        const day = String(date.getDate()).padStart(2, '0'); // 填充0
        return `${year}-${month}-${day}`
      }
    },
    //辅助函数，向过站信息的数据库中查询数据，是查询从某一日期到某一日期，某一个机型的数据,或者多个机型数据，多个机型用’/‘隔开；
    async siteInfoStartDateByEndDate(starDate,endDate,type,op){
      return (await this.$request.post('/siteInfoStartDateByEndDate', {
        starDate: starDate,
        endDate: endDate,
        type: type,
        op:op,
      })).data
    },
    //辅助函数，计算过站时间节拍的表
    async sortedAndProcessedData() {
      // 将 f_END_TIME 转换为日期对象，并进行排序
      const sortedData = this.siteInfoData.map(item => ({
        ...item,
        f_END_TIME_DATE: new Date(item.f_END_TIME)
      })).sort((a, b) => a.f_END_TIME_DATE - b.f_END_TIME_DATE);

      // 计算时间差和设置 X 轴数据
      const chartData = {
        xAxisData: [],
        yAxisData: []
      };

      sortedData.forEach((item, index) => {
        chartData.xAxisData.push(item.f_RECORD_ID); // 使用 f_RECORD_ID 作为 X 轴数据

        // 如果是第一个元素，则时间差为 0 或不计算
        if (index > 0) {
          const prevItem = sortedData[index - 1];
          const timeDiff = (item.f_END_TIME_DATE - prevItem.f_END_TIME_DATE) / 1000 / 60; // 转换为分钟
          chartData.yAxisData.push(timeDiff.toFixed(2)); // 保留两位小数
        } else {
          chartData.yAxisData.push(0); // 第一个元素的时间差为 0
        }
      });

      return chartData;
    }
  },
  mounted() {
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
</style>